<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.orderNo"
        clearable
        class="filter-item"
        style="width: 200px"
        placeholder="请输入订单号"
      />

      <el-button
        v-permission="['GET /admin/order/list']"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查找
      </el-button>

    </div>

    <!-- 查询结果 -->
    <el-table
      :header-cell-style="{background:'#f5f5f5',color:'#333333',height:'50px'}"
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column
        width="140"
        align="center"
        label="ID"
        prop="id"
        sortable
      />

      <el-table-column align="center" label="订单号" prop="orderNo" width="200"/>

      <el-table-column align="center" label="月数" prop="months"/>
      <el-table-column align="center" label="金额" prop="orderPrice">

        <template slot-scope="scope">
          <div class="money">￥{{ scope.row.orderPrice |priceFormat}}</div>
        </template>

      </el-table-column>

      <el-table-column align="center" label="支付状态" prop="payStatus" width="200">
        <template slot-scope="scope">
          <div :class="(scope.row.payStatus == 1 || scope.row.payStatus == 3)?'':'money'">{{ scope.row.payStatus
            |payStatusFormat}}
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="支付时间" prop="payTime"/>

      <el-table-column align="center" label="创建时间" prop="createTime"/>

      <el-table-column
        align="center"
        label="操作"
        width="140"
        class-name="small-padding fixed-width"
      >

        <template slot-scope="scope">
          <el-button
            v-if="scope.row.payStatus == 2"
            v-permission="['GET /admin/order/refund']"
            type="danger"
            size="mini"
            @click="handleRefund(scope.row)"
          >退款
          </el-button>

        </template>

      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<style>
  .money {
    color: red;
  }
</style>

<script>
  import { list, refund } from '../../api/order'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import { pdfView } from '../../utils/pdfUtils'

  export default {
    name: 'Order',
    components: { Pagination },
    data() {
      return {
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          orderNo: undefined,
          sort: '',
          order: '',
          limit: 10
        }

      }
    },
    computed: {},
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        list(this.listQuery)
          .then((response) => {
            this.list = response.data.data.list
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },

      handleRefund(row) {
        this.$confirm('是否确认退款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            refund(row.id)
              .then((response) => {
                this.$notify.success({
                  title: '成功',
                  message: '删除成功',
                  duration: 2000
                })
                this.handleFilter()
              })
              .catch((response) => {
                this.$notify.error({
                  title: '失败',
                  message: response.data.errmsg
                })
              })
          })
          .catch()
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      }

    }
  }
</script>
